<template>
  <view>
    <!-- 地图组件 -->
    <map :longitude="longitude" :latitude="latitude" :scale="scale"></map>
    <button @click="openPos">打开定位</button>
    <button @click="selPos">选择定位</button>
    <!-- 潜入h5页面 -->
    <web-view src="https://itcast.cn"></web-view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      // 天安门
      // 经度
      longitude: 116.39742,
      // 纬度
      latitude: 39.909,
      // 数值越大=》地图显示的信息越详细，但是显示范围小
      scale: 16

    }
  },
  onLoad () {
    this.getPos()
  },
  methods: {
    getPos () {
      // 获取定位信息
      uni.getLocation({
        type: 'wgs84',
        success: (res) => {
          console.log('当前位置的经度：' + res.longitude)
          console.log('当前位置的纬度：' + res.latitude)
          this.longitude = res.longitude
          this.latitude = res.latitude
        }
      })
    },
    // 打开定位
    openPos () {
      uni.openLocation({
        latitude: this.latitude,
        longitude: this.longitude
      })
    },
    // 选择位置
    selPos () {
      uni.chooseLocation({
        success: function (res) {
          console.log('位置名称：' + res.name)
          console.log('详细地址：' + res.address)
          console.log('纬度：' + res.latitude)
          console.log('经度：' + res.longitude)
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
map {
  width: 750rpx;
  height: 600rpx;
}
</style>